<template>
    <view class="modify_mobile flex-col">

        <view class="group_3 flex-col">
            <view class="text-wrapper_1 flex-row">
                <text class="text_3">当前手机号</text>
                <text class="text_4">199****5432</text>
            </view>
            <view class="list_1 flex-col">
                <view class="input_1 flex-col" v-for="(item, index) in loopData0" :key="index">
                    <view class="section_4 flex-col"></view>
                    <view class="section_5 flex-row">
                        <text class="text_5">{{ item.lanhutext0 }}</text>
                        <text class="text_6">{{ item.lanhutext1 }}</text>
                        <button v-if="item.slot1 === 1" class="button_1 fcc" @click="onClick_1">
                            <text class="text_7">获取验证码</text>
                        </button>
                    </view>
                </view>
            </view>
            <view class="group_4 flex-col"></view>
            <button class="button_2 fcc" @click="onClick_2">
                <text class="text_8">提交</text>
            </button>
        </view>
    </view>
</template>

<script setup>
import { } from 'vue'

const loopData0 = [
    { lanhutext0: '新手机号码', lanhutext1: '请输入新手机号码' },
    { lanhutext0: '短信验证码', lanhutext1: '请输入短信验证码', slot1: 1 },
]
const onClick_1 = () => {

}
const onClick_2 = () => {

}
</script>
<style scoped lang="scss">
.modify_mobile {
    background-color: rgba(245, 245, 245, 1);
    position: relative;
    width: 750rpx;
    height: 1580rpx;
    overflow: hidden;

    .group_1 {
        background-color: rgba(255, 255, 255, 1);
        width: 750rpx;
        height: 176rpx;

        .section_1 {
            width: 682rpx;
            height: 36rpx;
            margin: 30rpx 0 0 42rpx;

            .text_1 {
                width: 108rpx;
                height: 36rpx;
                overflow-wrap: break-word;
                color: rgba(0, 0, 0, 1);
                font-size: 30rpx;
                letter-spacing: -0.30000001192092896px;
                font-family: AlibabaPuHuiTi-Regular;
                font-weight: normal;
                text-align: center;
                white-space: nowrap;
                line-height: 36rpx;
            }

            .thumbnail_1 {
                width: 34rpx;
                height: 22rpx;
                margin: 6rpx 0 0 438rpx;
            }

            .thumbnail_2 {
                width: 32rpx;
                height: 22rpx;
                margin: 6rpx 0 0 10rpx;
            }

            .image_1 {
                width: 50rpx;
                height: 24rpx;
                margin: 6rpx 0 0 10rpx;
            }
        }

        .section_2 {
            height: 102rpx;
            width: 750rpx;
            margin: 10rpx 0 2rpx 0;

            .group_2 {
                width: 750rpx;
                height: 102rpx;

                .nav-bar_1 {
                    width: 750rpx;
                    height: 102rpx;

                    .icon_1 {
                        width: 18rpx;
                        height: 34rpx;
                        margin: 40rpx 0 0 36rpx;
                    }

                    .text_2 {
                        width: 168rpx;
                        height: 40rpx;
                        overflow-wrap: break-word;
                        color: rgba(0, 0, 0, 0.9);
                        font-size: 34rpx;
                        font-family: AlibabaPuHuiTi-Regular;
                        font-weight: normal;
                        text-align: center;
                        white-space: nowrap;
                        line-height: 40rpx;
                        margin: 32rpx 0 0 238rpx;
                    }

                }

                .box_1 {
                    background-color: rgba(0, 0, 0, 0.1);
                    width: 750rpx;
                    height: 2rpx;
                    margin: 100rpx 0 0 -750rpx;
                }
            }
        }
    }

    .group_3 {
        width: 750rpx;
        height: 1364rpx;

        .text-wrapper_1 {
            background-color: rgba(255, 255, 255, 1);
            width: 750rpx;
            height: 100rpx;

            .text_3 {
                width: 148rpx;
                height: 42rpx;
                overflow-wrap: break-word;
                color: rgba(0, 0, 0, 1);
                font-size: 30rpx;
                font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
                font-weight: normal;
                text-align: left;
                white-space: nowrap;
                line-height: 42rpx;
                margin: 30rpx 0 0 30rpx;
            }

            .text_4 {
                width: 164rpx;
                height: 42rpx;
                overflow-wrap: break-word;
                color: rgba(0, 0, 0, 1);
                font-size: 28rpx;
                font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
                font-weight: normal;
                text-align: right;
                white-space: nowrap;
                line-height: 42rpx;
                margin: 30rpx 40rpx 0 368rpx;
            }
        }

        .list_1 {
            width: 750rpx;
            height: 200rpx;
            justify-content: space-between;

            .input_1 {
                background-color: rgba(255, 255, 255, 1);
                width: 750rpx;
                height: 100rpx;

                .section_4 {
                    background-color: rgba(244, 244, 244, 1);
                    width: 690rpx;
                    height: 2rpx;
                    margin-left: 20rpx;
                }

                .section_5 {
                    width: 398rpx;
                    height: 42rpx;
                    margin: 28rpx 0 28rpx 30rpx;

                    .text_5 {
                        width: 148rpx;
                        height: 42rpx;
                        overflow-wrap: break-word;
                        color: rgba(0, 0, 0, 1);
                        font-size: 30rpx;
                        font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
                        font-weight: normal;
                        text-align: left;
                        white-space: nowrap;
                        line-height: 42rpx;
                    }

                    .text_6 {
                        width: 220rpx;
                        height: 42rpx;
                        overflow-wrap: break-word;
                        color: rgba(193, 193, 193, 1);
                        font-size: 28rpx;
                        font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
                        font-weight: normal;
                        text-align: right;
                        white-space: nowrap;
                        line-height: 42rpx;
                        margin-left: 30rpx;
                    }

                    .button_1 {
                        background-color: rgba(0, 0, 0, 1);
                        border-radius: 2px;
                        height: 64rpx;
                        width: 164rpx;
                        margin: -12rpx -292rpx 0 128rpx;

                        .text_7 {
                            overflow-wrap: break-word;
                            color: rgba(255, 255, 255, 1);
                            font-size: 28rpx;
                            font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
                            font-weight: normal;
                            text-align: right;
                            white-space: nowrap;
                        }
                    }
                }
            }
        }

        .group_4 {
            background-color: rgba(244, 244, 244, 1);
            width: 690rpx;
            height: 2rpx;
            margin-left: 30rpx;
        }

        .button_2 {
            background-color: rgba(0, 0, 0, 1);
            height: 88rpx;
            width: 690rpx;
            margin: 180rpx 0 794rpx 30rpx;

            .text_8 {
                overflow-wrap: break-word;
                color: rgba(255, 255, 255, 1);
                font-size: 32rpx;
                letter-spacing: 7px;
                font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
                font-weight: normal;
                text-align: center;
                white-space: nowrap;
            }
        }
    }

    .image_2 {
        width: 750rpx;
        height: 42rpx;
        margin-top: -2rpx;
    }
}
</style>